<template>
  <div>
    <div class="ProProductPrice">
      <div class="price-item">
        <span>￥90</span>
        <s>￥180</s>
      </div>
      <div class="promotion-tag">
        <div class="join-card">
          <span class="ka">万店联名卡</span>
          <span>5折限时秒杀</span>
        </div>
        <div class="btn-search">查看<span class="button-right">&gt;</span></div>
      </div>
      <div class="product-detail-info">
        <p>
          五星店铺推荐初春热销爆款果冻冰透晶石极光简约百搭
          仙女裸粉碎钻饰品单拍加固不上门
        </p>
        <div class="right-part">
          <span class="icon-shoucang iconfont"></span>
          收藏
        </div>
      </div>
      <div class="product-tags">
        <span class="tag">贝壳</span>
        <span class="tag">金箔</span>
        <span class="tag">果冻</span>
        <span class="tag">冰透</span>
        <span class="tag">百搭</span>
      </div>
      <div class="unit-card">
        <span class="badge">万店联名卡</span>
        <span class="text">最高享63折,省67元</span>
        <span class="buy-btn">去购买</span>
      </div>
      <div class="promotion-component">
        <div class="title">限制</div>
        <div class="promotion-item">
          <span class="zhekou">折扣</span>
          <span class="desc">不可使用店铺承担-平台券,不可...</span>
        </div>
        <div class="button-right">
          <span class="SVGInline">&gt;</span>
        </div>
      </div>
      <div class="select-spu">
        <div class="SelectSku">选择</div>
        <div class="main">
          <span class="text">已选：美甲加固</span>
          <span class="you">&gt;</span>
        </div>
      </div>
      <div class="projects-group">
        <h1>项目说明</h1>
        <div class="item-brief">
          <div class="project-img">
            <img src="../../../public/img/25.webp" />
          </div>
          <div class="text-part">
            <div class="project-name">单色/多色跳色美甲</div>
            <div class="project-detail">共一个项目，共一次</div>
          </div>
          <div class="part">
            <span class="price-part">￥148起</span>
            <span class="jump-to-buy">购买</span>
          </div>
        </div>
        <div class="item-brief">
          <div class="project-img">
            <img src="../../../public/img/25.webp" />
          </div>
          <div class="text-part">
            <div class="project-name">单色/多色跳色美甲</div>
            <div class="project-detail">共一个项目，共一次</div>
          </div>
          <div class="part">
            <span class="price-part">￥148起</span>
            <span class="jump-to-buy">购买</span>
          </div>
        </div>
        <div class="item-brief">
          <div class="project-img">
            <img src="../../../public/img/25.webp" />
          </div>
          <div class="text-part">
            <div class="project-name">单色/多色跳色美甲</div>
            <div class="project-detail">共一个项目，共一次</div>
          </div>
          <div class="part">
            <span class="price-part">￥148起</span>
            <span class="jump-to-buy">购买</span>
          </div>
        </div>
        <div class="item-brief">
          <div class="project-img">
            <img src="../../../public/img/25.webp" />
          </div>
          <div class="text-part">
            <div class="project-name">单色/多色跳色美甲</div>
            <div class="project-detail">共一个项目，共一次</div>
          </div>
          <div class="part">
            <span class="price-part">￥148起</span>
            <span class="jump-to-buy">购买</span>
          </div>
        </div>
        <div class="item-brief">
          <div class="project-img">
            <img src="../../../public/img/25.webp" />
          </div>
          <div class="text-part">
            <div class="project-name">单色/多色跳色美甲</div>
            <div class="project-detail">共一个项目，共一次</div>
          </div>
          <div class="part">
            <span class="price-part">￥148起</span>
            <span class="jump-to-buy">购买</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
@import url("http://at.alicdn.com/t/font_2803750_hhn82wqc9y.css");
.ProProductPrice {
  width: 96%;
  height: 14rem;
  margin: auto;
}
.price-item {
  width: 100%;
  height: 1rem;
  margin: auto;
}
.price-item span {
  font-size: 0.5rem;
  color: red;
  line-height: 1.2rem;
}
.price-item s {
  font-size: 0.3rem;
  color: #666;
}
.promotion-tag {
  width: 100%;
  height: 0.6rem;
  background: #fbe1e1;
  border-radius: 0.1rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.join-card {
  width: 4rem;
  height: 0.6rem;
  padding-top: 0.15rem;
}
.join-card span {
  border: 0.01rem solid #af1d1d;
  font-size: 0.25rem;
  margin-left: 0.4rem;
  border-radius: 0.1rem;
  color: #af1d1d;
}
.join-card .ka {
  background: black;
  color: #ebd7c0;
}
.btn-search {
  font-size: 0.3rem;
  color: #af1d1d;
  margin-right: 0.4rem;
  padding-top: 0.15rem;
}
.button-right {
  margin-left: 0.2rem;
}
.product-detail-info {
  width: 100%;
  height: 1.6rem;
  display: flex;
  justify-content: space-between;
}
.product-detail-info p {
  width: 80%;
  font-size: 0.3rem;
  line-height: 0.5rem;
}
.right-part {
  width: 0.4rem;
  height: 0.8rem;
}
.product-tags {
  width: 100%;
  height: 0.4rem;
  border-bottom: 0.2rem solid rgb(244, 244, 244);
}
.tag {
  font-size: 0.24rem;
  margin-right: 0.2rem;
  color: #999;
}
.unit-card {
  width: 100%;
  height: 0.8rem;
  border-bottom: 0.2rem solid rgb(244, 244, 244);
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.unit-card span {
  font-size: 0.2rem;
}
.badge {
  background: black;
  color: #ebd7c0;
  margin-right: 0.2rem;
  border-radius: 0.1rem;
  width: 1.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  margin-top: 0.2rem;
}
.buy-btn {
  margin-left: 1.5rem;
  color: #fff;
  background: #f1a162;
  border-radius: 0.55rem;
  width: 1.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  margin-top: 0.2rem;
}
.promotion-component {
  width: 100%;
  height: 0.8rem;
  border-bottom: 0.2rem solid rgb(244, 244, 244);
  display: flex;
  line-height: 0.8rem;
  font-size: 0.3rem;
}
.title {
  color: #999;
  margin-right: 0.4rem;
}
.promotion-item {
  width: 5.6rem;
  height: 0.8rem;
  display: flex;
}
.zhekou {
  margin-right: 0.3rem;
  background: pink;
  border-radius: 16%;
  width: 0.8rem;
  height: 0.5rem;
  line-height: 0.5rem;
  margin-top: 0.2rem;
  text-align: center;
}
.SVGInline {
  font-size: 0.4rem;
  color: #999;
}
.select-spu {
  width: 100%;
  height: 1.3rem;
  border-bottom: 0.2rem solid rgb(244, 244, 244);
  display: flex;
  font-size: 0.26rem;
}
.SelectSku {
  width: 15%;
  margin-top: 0.1rem;
  color: #999;
}
.you {
  margin-left: 3.8rem;
  font-size: 0.4rem;
  color: #999;
}
.projects-group {
  width: 100%;
  height: 5rem;
}
h1 {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
}
.item-brief {
  width: 100%;
  height: 2rem;
  display: flex;
  border: 0.01rem solid #999;
  margin-bottom: 0.3rem;
}
.project-img {
  width: 20%;
  height: 1.4rem;
  background-color: blanchedalmond;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  display: inline-block;
}
.project-img img {
  width: 100%;
}
.text-part {
  width: 60%;
  height: 1.4rem;
  margin-top: 0.3rem;
}
.project-name {
  width: 100%;
  height: 1rem;
  font-size: 0.32rem;
}
.project-detail {
  color: #999;
}
.part {
  width: 20%;
  height: 1.4rem;
  margin-top: 0.3rem;
}
.price-part {
  font-size: 0.33rem;
}
.jump-to-buy {
  font-size: 0.3rem;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  display: inline-block;
  border: 0.01rem solid red;
  width: 0.9rem;
  text-align: center;
  border-radius: 1.1rem;
  color: red;
}
</style>
